<!--
emelent-plus:
!完全导入
1、操作指令： npm/cnpm/pnpm install element-plus   ||    yarn add element-plus
2、配置main.ts
  ?导入element-plus
  import ElementPlus from 'element-plus'
  import 'element-plus/dist/index.css'
  ?使用element-plus
  app.use(ElementPlus)
!按需导入
1、操作指令：npm/cnpm/pnpm install -D unplugin-vue-components unplugin-auto-import
2、配置vite.config.ts
  ?element-plus  按需导入配置
  import AutoImport from 'unplugin-auto-import/vite'
  import Components from 'unplugin-vue-components/vite'
  import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
  export default defineConfig({
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  });
!图标配置
1、操作指令：npm/cnpm/pnpm install @element-plus/icons-vue   ||    yarn add @element-plus/icons-vue
2、配置main.ts
  ?导入element-plus  icon
  import * as ElementPlusIconsVue from '@element-plus/icons-vue'
  ?使用element-plus  icon
  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
  }
-->
<template>
  <div id="wrap">
    <h1>element-plus安装</h1>
    <!-- 按钮 -->
    <div class="mb-4">
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </div>
    <div class="mb-4">
      <el-button plain>Plain</el-button>
      <el-button type="primary" plain>Primary</el-button>
      <el-button type="success" plain>Success</el-button>
      <el-button type="info" plain>Info</el-button>
      <el-button type="warning" plain>Warning</el-button>
      <el-button type="danger" plain>Danger</el-button>
    </div>
    <!-- 开关 -->
    <el-switch v-model="value1" />
    <el-switch
      v-model="value2"
      class="ml-2"
      style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
    />
    <!-- 时间选择器 -->
    <el-time-picker v-model="value3" placeholder="Arbitrary time" />
    <el-time-picker v-model="value4" arrow-control placeholder="Arbitrary time" />
    <!-- 穿梭框 -->
    <el-transfer v-model="value" :data="data" />
    <!-- 图标按钮 -->
    <div>
      <el-button :icon="Search" circle />
      <el-button type="primary" :icon="Edit" circle />
      <el-button type="success" :icon="Check" circle />
      <el-button type="info" :icon="Message" circle />
      <el-button type="warning" :icon="Star" circle />
      <el-button type="danger" :icon="Delete" circle />
    </div>
    <div>
      <el-button type="primary" :icon="Edit" />
      <el-button type="primary" :icon="Share" />
      <el-button type="primary" :icon="Delete" />
      <el-button type="primary" :icon="Search">Search</el-button>
      <el-button type="primary">
        Upload<el-icon class="el-icon--right"><Upload /></el-icon>
      </el-button>
    </div>
    <!-- 按钮组 -->
    <el-button-group>
      <el-button type="primary" :icon="ArrowLeft">Previous Page</el-button>
      <el-button type="primary">
        Next Page<el-icon class="el-icon--right"><ArrowRight /></el-icon>
      </el-button>
    </el-button-group>

    <el-button-group class="ml-4">
      <el-button type="primary" :icon="Edit" />
      <el-button type="primary" :icon="Share" />
      <el-button type="primary" :icon="Delete" /> </el-button-group
    ><br />

    <!-- icon图标 -->
    <el-icon :size="50" color="#409eff"><Search /></el-icon>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/LoginView">
      <el-breadcrumb-item :to="{ path: '/HomeView' }">homepage</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/RegisterView">promotion management</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item>promotion list</el-breadcrumb-item>
      <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script lang="ts">
export default {
  name: 'dayStuDemo69',
};
</script>

<script lang="ts" setup>
import { ref } from 'vue';
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  Share,
  ArrowLeft,
  Upload,
  ArrowRight,
} from '@element-plus/icons-vue';
//开关
const value1 = ref(true);
const value2 = ref(true);
//时间选择器
const value3 = ref();
const value4 = ref();
//穿梭框
interface Option {
  key: number;
  label: string;
  disabled: boolean;
}
const generateData = () => {
  const data: Option[] = [];
  for (let i = 1; i <= 15; i++) {
    data.push({
      key: i,
      label: `Option ${i}`,
      disabled: i % 4 === 0,
    });
  }
  return data;
};
const data = ref<Option[]>(generateData());
const value = ref([]);
</script>

<style lang="scss" scoped>
.example-basic .el-date-editor {
  margin: 8px;
}
</style>
